<template>
  <div class="app">
    <!-- 顶部状态栏 -->
    <!-- 头部区域 -->
    <van-row
        type="flex" justify="center" align="middle" class="header">
      <van-col span="24">
        <van-search
            v-model="value"
            show-action
            placeholder="搜索考研资料"
        >
          <template #action>
            <div @click="onClickButton">搜索</div>
          </template>
        </van-search>
      </van-col>
      <van-col span="8">2025考研倒计时</van-col>
      <van-col span="5" offset="5">254天</van-col>
      <van-col offset="12" span="">满怀激情的投入到对事理的研究</van-col>
      <van-col offset="12" span="">2025备战考研</van-col>
      <van-col offset="12" span=""></van-col>
      <van-button @click="onBuild" size="normal" round>
        <van-swipe
            vertical
            class="notice-swipe"
            :autoplay="2000"
            :touchable="false"
            :show-indicators="false"
        >
          <van-swipe-item>打卡</van-swipe-item>
          <van-swipe-item>打卡</van-swipe-item>
        </van-swipe>
      </van-button>

    </van-row>

    <!-- 功能导航 -->
    <!-- 中部主体区域 -->
    <van-row type="flex" justify="space-around" class="main">
      <van-grid :column-num="6">
        <van-grid-item icon="wap-home" @click="onSchool" text="院校"/>
        <van-grid-item icon="gem" @click="onNews" text="资讯"/>
        <van-grid-item icon="newspaper" @click="onEncyclopedia" text="百科"/>
<!--        <van-grid-item icon="font" @click="onReference" text="参考书"/>-->
        <van-grid-item icon="records" @click="onQuestion" text="题库"/>
        <van-grid-item icon="label" @click="onWord" text="单词"/>
        <van-grid-item icon="down" @click="onInformation" text="资料"/>
<!--        <van-grid-item icon="chat-o" @click="onLook" text="问学长"/>-->
      </van-grid>
    </van-row>

    <!-- 今日任务 -->
    <!-- 底部区域 -->
    <van-row type="flex" justify="center" align="middle" class="footer">
<!--      <van-col span="12">今日任务</van-col>-->
<!--      <van-col span="12">-->
<!--        <van-button @click="onAddTask" size="normal" round>-->
<!--          <van-swipe-->
<!--              vertical-->
<!--              class="notice-swipe"-->
<!--              :autoplay="2000"-->
<!--              :touchable="false"-->
<!--              :show-indicators="false"-->
<!--          >-->
<!--            <van-swipe-item>任务</van-swipe-item>-->
<!--            <van-swipe-item>任务</van-swipe-item>-->
<!--          </van-swipe>-->
<!--        </van-button>-->
<!--      </van-col>-->
<!--      <van-col offset="5" span="5">定时任务</van-col>-->
<!--      <van-col offset="10" span="5">2025备战考研</van-col>-->
    </van-row>



  </div>
</template>

<script setup>
import {ref} from 'vue';
import {useRouter} from "vue-router";
const value = ref('')
const router = useRouter(); // 使用useRouter来获取路由实例
const onBuild = () => {
  router.push("/clockIn")
}
const onAddTask = () => {
  router.push("/addTask")
}


const allLists = ref([])
const onClickButton = () => {
  router.push("/search")
}
const onSchool = () => {
  router.push("/school");
}
const onNews = () => {
  router.push("/news");
}
const onEncyclopedia = () => {
  router.push("/encyclopedia");
}
const onReference = () => {
  router.push("/reference");
}
const onQuestion = () => {
  router.push("/question");
}
const onWord = () => {
  router.push("/word");
}
const onInformation = () => {
  router.push("/information");
}
const onLook = () => {
  router.push('/look')
}
</script>

<style scoped lang="scss">
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .countdown {
    margin-top: 16px;
    font-size: 28px;
    color: #f90;
  }

  .nav {
    padding: 16px 0;
  }

  .today-task {
    padding: 16px;
    border-bottom: 1px solid #e5e5e5;
  }

  .bottom-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1);
    padding: 16px;
  }
  .dtime{
    color: #f90;
    font-size:200px ;
    background-color: transparent;
  }
  .header {
    background-image: url("https://cdn.pixabay.com/photo/2016/03/04/19/36/background-1236581_1280.jpg");
    background-size: cover;
    height: 300px; /* 自定义高度 */
  }
  .notice-swipe {
    height: 40px;
    line-height: 40px;
  }
  .footer {
    background-image: url("https://cdn.pixabay.com/photo/2016/03/04/19/36/background-1236581_1280.jpg");
    background-size: cover;
    height: 120px; /* 自定义高度 */
  }

}
</style>